<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <link rel="stylesheet" href="css/reset.css">

    <style>
        .box {
            width: 1200px;
            height: 200px;
            background-color:aliceblue;
            opacity: 0.3;
            position: relative;
            margin: 0 auto;
        }

        .box .left {
            width: 28px;
            height: 44px;
            background: url(../images/icons.png) no-repeat -21px -94px;
            position: absolute;
            top: 50%;
            left: -28px;
            margin-top: -22px;
            transition: all 0.8s ease 0s;
            border-radius: 7px;
        }


        .box .left:hover {
            /* background-position: -21px -29px; */
            opacity: 0.8;
            transform: rotate(180deg);
        }


        .b2 .sprite {
            background: url('../images/sprite.png') no-repeat top left;
            width: 264px;
            height: 110px;
            float: left;
           
        }

        .b2 {
            margin: 0 auto;
            width: 1056px;
        }

        .sprite.small02 {
            background-position: 0 0;
        }

        .sprite.small01 {
            background-position: -274px 0;
        }

        .sprite.small04 {
            background-position: -548px 0;
        }

        .sprite.small03 {
            background-position: -822px 0;
        }
    </style>

</head>

<body>

    <div class="box">
        <div class="left">
        </div>
    </div>

    <div class="b2">

        <div class='sprite small02'></div>
        <div class='sprite small01'></div>
        <div class='sprite small04'></div>
        <div class='sprite small03'></div>


    </div>

    

</body>

</html>